
<template>
  <div>
    <el-upload
      v-loading="loading"
      class="avatar-uploader"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-progress="onProgress"
      :on-error="onEerror"
      action=""
      :on-change="getFile"
      :limit="9999"
      :auto-upload="false"
      accept=".jpg,.png,.JPG,.PNG"
    >
      <template v-if="image">
        <img
          v-if="(image + '').length < 20"
          :src="lockImgs[image]"
          class="avatar"
        />
        <img v-else :src="image" class="avatar" />
      </template>
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <p class="tipUpload">Upload image size cannot exceed 500K!</p>
  </div>
</template>
<style>
.tipUpload {
  margin: 0;
  color: rgb(192, 196, 204);
  font-size: 14px;
}
.avatar-uploader {
  width: 178px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  /* height: 178px; */
  display: block;
}
</style>

<script>
import * as imageConversion from "image-conversion";
export default {
  props: {
    image: {
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      lockImgs: [
        require("@/assets/product/a0.jpg"),
        require("@/assets/product/a1.jpg"),
        require("@/assets/product/sd0.png"),
        require("@/assets/product/sd1.png"),
        require("@/assets/product/sd2.png"),
        require("@/assets/product/sd3.png"),
        require("@/assets/product/sd4.png"),
        require("@/assets/product/sd5.png"),
        require("@/assets/product/sd6.png"),
        require("@/assets/product/we0.png"),
        require("@/assets/product/we1.png"),
        require("@/assets/product/sd0.png"),
        require("@/assets/product/sd0.png"),
      ],
    };
  },
  mounted() {
    // console.log("this.image=====", this.image);
  },
  methods: {
    onEerror(event, file, fileList) {
      this.loading = false;
    },
    onProgress(event, file, fileList) {
      this.loading = true;
    },
    async getFile(file, fileList) {
      let ysImg = await this.beforeAvatarUpload(file);
      console.log("ysImg===", ysImg);
      this.getBase64(ysImg).then((res) => {
        this.$message({
          message: "Update succeeded",
          type: "success",
        });
        this.$emit("changeImage", res);
      });
      this.loading = false;
    },
    //把图片文件作为参数传递到方法中
    beforeAvatarUpload(file) {
      console.log(file);
      file = file.raw;
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 0.5;
      if (!isJpgOrPng) {
        this.$message.error(
          "Uploaded images should only be in JPG or PNG format!"
        );
        return false;
      }
      if (!isLt2M) {
        this.$message.error("Upload image size cannot exceed 500K!");
        return false;
      }
      return new Promise((resolve) => {
        // 压缩到100KB,这里的100就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 100).then((res) => {
          var mfile = res;
          // console.log('压缩好的文件',mfile)
          // console.log('压缩上传的图片大小',mfile.size)
          //Blob转成File
          let files1 = new window.File(
            [mfile], //[文件]
            file.name,
            { type: file.type }
          );
          resolve(files1);
        });
      });
    },
  },
};
</script>
